<template>
  <div class="goods-management-wrapper">
    <List :loading="loading">
      <ListItem v-for="goods in goodsList.data" :key="goods.id">
        <ListItemMeta>
          <template slot="title">
            <h3>{{goods.title}}</h3>
          </template>
          <template slot="avatar">
            <img :src="goods.image_src" style="width: 100px" />
          </template>
          <template slot="description">
            售价：
            <span style="color: #c0392b">￥{{goods.price}}</span>
            <Divider type="vertical" />库存：
            <span style="color: #c0392b">{{goods.amount}}</span>
            <Divider type="vertical" />分类：
            <span style="color: #c0392b">{{goods.kind.name}}</span>
            <Divider type="vertical" />状态：
            <span style="color: #27ae60" v-if="goods.status">已上架</span>
            <span style="color: #e67e22" v-else>未上架</span>
            <br />
            简介：{{contentCut(goods.desc)}}
            <br />
            更新时间：{{goods.update_time}}
          </template>
        </ListItemMeta>
        <template slot="action">
          <li>
            <a
              to="/"
              @click="switchStatus(goods.id,goods.title,true)"
              style="color: #27ae60"
              v-if="!goods.status"
            >上架</a>
            <a
              to="/"
              @click="switchStatus(goods.id,goods.title,false)"
              style="color: #e74c3c"
              v-else
            >下架</a>
          </li>
          <li>
            <router-link :to="'/user/'+getUid+'/publish?type=goods_edit&goods_id='+goods.id" :disabled="!goods.status?false:true">编辑</router-link>
          </li>
          <li>
            <a href="#" @click="showConfirmModal(goods.id,goods.title)" style="color: #e74c3c">删除</a>
          </li>
        </template>
      </ListItem>
      <template slot="header">
        <div class="header-wrapper">
          <div class="header-classify">
            <RadioGroup v-model="classify" @on-change="switchClassify">
              <Radio label="全部商品"></Radio>
              <Radio label="未上架"></Radio>
              <Radio label="已上架"></Radio>
            </RadioGroup>
          </div>

          <div class="header-search">
            <Input search enter-button placeholder="搜索商品" />
          </div>
        </div>
      </template>
      <template slot="footer">
        <div class="footer-wrapper">
          <Page :total="goodsList.total" :page-size="goodsList.per_page" @on-change="switchPages" />
        </div>
      </template>
    </List>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";
import _ from "lodash";

export default {
  mixins: [getBasicInfo],
  data() {
    return {
      goodsList: [],
      classify: "全部商品",
      loading: false
    };
  },
  mounted() {
    this.fetchGoods();
  },
  methods: {
    fetchGoods(page = 1,status = 2) {
      this.loading = true;
      this.axios
        .get(`/api/goods?craftsman=${this.getCid}&status=${status}&page=${page}`)
        .then(res => {
          this.goodsList = res.data;
          this.loading = false;
        });
    },
    contentCut: text => _.truncate(text, { length: 45 }),
    showConfirmModal(id, title) {
      this.$Modal.confirm({
        title: "删除帖子",
        content: `您确定要删除商品<strong> ${title} </strong>吗？`,
        onOk: () => {
          this.axios.delete(`/api/goods/${id}`).then(res => {
            this.fetchGoods();
            this.$Message.success("删除成功");
          });
        }
      });
    },
    switchStatus(id, title, status) {
      if (status)
        this.$Modal.confirm({
          title: "商品上架",
          content: `您确定要将商品<strong> ${title} </strong>上架吗？`,
          onOk: () => {
            this.axios.patch(`/api/goods/${id}`).then(res => {
              if (this.classify == '全部商品') {
                this.fetchGoods();
              } else
                this.fetchGoods(undefined,0);
              
              this.$Notice.success({ title: "商品上架成功" });
            });
          }
        });
      else
        this.$Modal.confirm({
          title: "商品下架",
          content: `您确定要将商品<strong> ${title} </strong>下架吗？`,
          onOk: () => {
            this.axios.patch(`/api/goods/${id}`).then(res => {
              if (this.classify=='全部商品') {
                this.fetchGoods();
              } else {
                this.fetchGoods(undefined,1);
              }
              this.$Notice.warning({ title: "商品下架成功" });
            });
          }
        });
    },
    switchClassify(item) {
      switch (item) {
        case "未上架":
          this.fetchGoods(undefined, 0);
          break;
        case "已上架":
          this.fetchGoods(undefined, 1);
          break;
        default:
          this.fetchGoods();
          break;
      }
    },
    switchPages(page) {
      if (this.classify=='全部商品') {
        this.fetchGoods(page);
      } else if(this.classify=='未上架'){
        this.fetchGoods(page,0);
      } else
        this.fetchGoods(page,1);
    }
  }
};
</script>

<style lang="scss" scoped>
.ivu-list {
  .header-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .footer-wrapper {
    text-align: center;
  }
}
</style>